惰性载入函数

今天在翻看红宝书的第22章的时候，发现了原来没有注意到的惰性载入函数，稍微记录一下，以加深印象。

什么是惰性载入函数

因为浏览器之间行为的差异，多数JavaScript 代码包含了大量的if 语句，将执行引导到正确的代
码中。看看下面的 createXHR() 函数：

function createXHR(){
  if (typeof XMLHttpRequest != "undefined"){
	return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined"){
    if (typeof arguments.callee.activeXString != "string"){
	  var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                      "MSXML2.XMLHttp"],
          i,len;
	  for (i=0,len=versions.length; i < len; i++){
		try {
		  new ActiveXObject(versions[i]);
		  arguments.callee.activeXString = versions[i];
		  break;
		} catch (ex){
		  //跳过
		}
  	  }
	}
	return new ActiveXObject(arguments.callee.activeXString);
  } else {
	throw new Error("No XHR object available.");
  }
}

每次调用createXHR()的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的XHR，然后测试有没有基于ActiveX 的XHR，最后如果都没有发现的话就抛出一个错误。每次调用该函数都是这样，即使每次调用时分支的结果都不变：如果浏览器支持内置XHR，那么它就一直支持了，那么这种测试就变得没必要了。即使只有一个if 语句的代码，也肯定要比没有if 语句的慢，所以如果if 语句不必每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载入的技巧。

惰性载入表示函数执行的分支仅会发生一次。

上面的 createXHR() 函数可能看起来比较类，来看一个简单的添加事件函数：

function addEvent (element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler);
  } else {
    element["on" + type] = handler;
  }
}

同样的，每次调用addEvent()的时候，都要对浏览器所支持的能力仔细检查。首先检查是否支持addEventListener方法，如果不支持再检查是否支持attachEvent方法，如果还不支持，就用DOM 0级的方法添加事件。在调用addEvent()过程中，每次这个过程都要走一遍。其实，浏览器支持其中的一种方法就会一直支持他，就没有必要再进行其他分支的检测了，也就是说if语句不必每次都执行，代码可以运行的更快一些。解决的方案称之为惰性载入。

实现惰性载入的方式

有两种实现惰性载入的方式:

第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。例如，可以用下面的方式使用惰性载入重写createXHR():

function createXHR(){
  if (typeof XMLHttpRequest != "undefined"){
	createXHR = function(){
	  return new XMLHttpRequest();
	};
  } else if (typeof ActiveXObject != "undefined"){
	createXHR = function(){
	  if (typeof arguments.callee.activeXString != "string"){
		var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
						"MSXML2.XMLHttp"],
			i, len;
		for (i=0,len=versions.length; i < len; i++){
		  try {
			new ActiveXObject(versions[i]);
			arguments.callee.activeXString = versions[i];
			break;
		  } catch (ex){
			//skip
		  }
		}
	  }
 	  return new ActiveXObject(arguments.callee.activeXString);
	};
  } else {
	createXHR = function(){
	  throw new Error("No XHR object available.");
	};
  }
  return createXHR();
}

在这个惰性载入的createXHR()中，if 语句的每一个分支都会为createXHR 变量赋值，有效覆
盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候，就会直接调用被
分配的函数，这样就不用再次执行if 语句了。

同样的方式重写上面的添加事件函数：

function addEvent (type, element, handler) {
  if (element.addEventListener) {
    addEvent = function (type, element, handler) {
      element.addEventListener(type, handler, false);
    }
  } else if (element.attachEvent){
    addEvent = function (type, element, handler) {
      element.attachEvent('on' + type, handler);
    }
  } else {
    addEvent = function (type, element, handler) {
      element['on' + type] = handler;
    }
  }
  return addEvent(type, element, handler);
}

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损
失性能了，而在代码首次加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果：

var createXHR = (function(){
  if (typeof XMLHttpRequest != "undefined"){
	return function(){
	  return new XMLHttpRequest();
	};
  } else if (typeof ActiveXObject != "undefined"){
	return function(){
	  if (typeof arguments.callee.activeXString != "string"){
		var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
						"MSXML2.XMLHttp"],
		i, len;
		for (i=0,len=versions.length; i < len; i++){
		  try {
			new ActiveXObject(versions[i]);
			arguments.callee.activeXString = versions[i];
			break;
		  } catch (ex){
			//skip
		  }
		}
	  }
	  return new ActiveXObject(arguments.callee.activeXString);
	};
  } else {
	return function(){
	  throw new Error("No XHR object available.");
	};
  }
})();

这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际
的逻辑都一样。不一样的地方就是第一行代码（使用var 定义函数）、新增了自执行的匿名函数，另外
每个分支都返回正确的函数定义，以便立即将其赋值给createXHR()。

同样的方式重写添加事件函数：

var addEvent = (function () {
  if (document.addEventListener) {
    return function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  } else if (document.attachEvent) {
    return function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  } else {
    return function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
})();

惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适，就要看你的具
体需求而定了。不过这两种方式都能避免执行不必要的代码。

完~